document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.querySelector('#data-table tbody');
    const addRowButton = document.getElementById('add-row');
  
    // Load data from chrome.storage
    chrome.storage.sync.get(['tableData'], (result) => {
      const tableData = result.tableData || [];
      tableData.forEach((row, index) => {
        addRowToTable(row, index);
      });
    });
  
    // Add a new row to the table
    addRowButton.addEventListener('click', () => {
      const newRow = { url: '', cookie: '', status: '' };
      addRowToTable(newRow);
      saveTableData();
    });
  
    // Add a row to the table
    function addRowToTable(row, index) {
      const tr = document.createElement('tr');
  
      const urlTd = document.createElement('td');
      const urlInput = document.createElement('input');
      urlInput.type = 'text';
      urlInput.value = row.url;
      urlInput.addEventListener('input', saveTableData);
      urlTd.appendChild(urlInput);
      tr.appendChild(urlTd);
  
      const cookieTd = document.createElement('td');
      const cookieInput = document.createElement('input');
      cookieInput.type = 'text';
      cookieInput.value = row.cookie;
      cookieInput.addEventListener('input', saveTableData);
      cookieTd.appendChild(cookieInput);
      tr.appendChild(cookieTd);
  
      const statusTd = document.createElement('td');
      const statusInput = document.createElement('input');
      statusInput.type = 'text';
      statusInput.value = row.status;
      statusInput.addEventListener('input', saveTableData);
      statusTd.appendChild(statusInput);
      tr.appendChild(statusTd);
  
      const actionsTd = document.createElement('td');
      const deleteButton = document.createElement('button');
      deleteButton.textContent = 'Delete';
      deleteButton.addEventListener('click', () => {
        tr.remove();
        saveTableData();
      });
      actionsTd.appendChild(deleteButton);
      tr.appendChild(actionsTd);
  
      tableBody.appendChild(tr);
    }
  
    // Save table data to chrome.storage
    function saveTableData() {
      const rows = tableBody.querySelectorAll('tr');
      const tableData = Array.from(rows).map(row => {
        const cells = row.querySelectorAll('input');
        return {
          url: cells[0].value,
          cookie: cells[1].value,
          status: cells[2].value
        };
      });
      chrome.storage.sync.set({ tableData });
    }
  });
  